<template>
    <div>
        <div class="centered-component" v-if="this.petData.length===0">
            <el-empty description="空空如也">
                <el-link type="primary" @click="goto()">点我去发布宠物吧</el-link>
            </el-empty>
        </div>
        <div>
            <el-row>
                <el-col style="margin-top: 20px" v-for="(pet, index) in petData" :key="index">
                    <el-card shadow="hover">
                        <div>
                            <div class="block">
                                <el-image :src="'http://localhost:8080/yyj/files/'+pet.image"
                                          :preview-src-list="['http://localhost:8080/yyj/files/'+pet.image]"
                                          style="height: 150px;width: 120px"></el-image>
                            </div>
                            <div class="bottom clearfix">
                  <span style="font-size: 5px">
                    {{ pet.currentTime }}
                  </span>
                            </div>
                        </div>
                        <div>
                            <el-descriptions :label-width="100" :column="2" title="萌宠信息" border>
                                <el-descriptions-item label="宠物名字">
                                    <template slot="label">
                                        <i class="el-icon-user">宠物名字</i>
                                    </template>
                                    {{ pet.name }}&nbsp&nbsp<i ></i>
                                </el-descriptions-item>
                                <el-descriptions-item label="品种">
                                    <template slot="label">
                                        <i class="el-icon-postcard">品种</i>
                                    </template>
                                    {{ pet.variety }}
                                </el-descriptions-item>
                                <el-descriptions-item label="年龄">
                                    <template slot="label">
                                        <i class="el-icon-watch">年龄</i>
                                    </template>
                                    {{ pet.age }}
                                </el-descriptions-item>
                                <el-descriptions-item label="地址">
                                    <template slot="label">
                                        <i class="el-icon-office-building">地址</i>
                                    </template>
                                    {{ pet.address }}
                                </el-descriptions-item>
                                <el-descriptions-item label="介绍">
                                    <template slot="label">
                                        <i class="el-icon-chat-dot-square">介绍</i>
                                    </template>
                                    {{ pet.description }}
                                </el-descriptions-item>
                                <el-descriptions-item label="联系电话">
                                    <template slot="label">
                                        <i class="el-icon-mobile-phone">联系电话</i>
                                    </template>
                                    {{ pet.chat }}
                                </el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import request from "@/utils/request";

    export default {
        name: "MyPutView",
        data() {
            return {
                radio: '1',
                Pet: {},
                showSpotInput: false,
                adoptDialog: false,
                petData: [],
                user: localStorage.getItem("user") ? (JSON).parse(localStorage.getItem("user")) : {},
                form: {},
                confirmFrom: {},
                currentStep: '1'
            };
        },
        created() {
            this.getMyPut(this.user.userId);
        },
        methods: {
            getMyPut(originalOwnerId) {
                request.get("/pet/" + originalOwnerId)
                    .then(res => {
                        if (res.code === '0') {
                            this.petData = res.data;
                        } else {
                            this.$message.error(res.msg);
                        }
                    });
            },
            goto() {
                this.$router.push("/homepage")
            }
        },

    }
</script>

<style scoped>
    .centered-component {
        position: absolute;
        top: 50%;
        left: 55%;
        transform: translate(-50%, -50%);
    }
</style>